<style lang="scss" scoped>
    .ui-map {
        background:#FFF;
        .ui-map-header {
            height:39px;
            border:none !important;
            box-shadow:inset 0 -1px rgba(#000, .2) !important;
        }
        .ui-map-search {
            position:absolute;
            top:50px;
            left:10px;
            z-index:1060;
        }
    }
</style>
<template>
    <div class="ui flex item one column ui-map">
        <div class="ui flex item ui-map-header col-center">
            <span class="m-l-5 m-r-5 f-18">地理位置标注</span><span class="t-red">（双击标注新的定位点）</span>
        </div>
        <div class="ui flex item one" id="bmap"></div>
        <div class="ui-map-search">
            <el-input placeholder="请输入内容" v-model="searchKeywords" size="medium" class="input-with-select" id="suggestId" style="width: 300px;">
                <el-button slot="append" icon="el-icon-search" @click="showSearch"></el-button>
            </el-input>
        </div>
        <div class="pos-a" style="right: 30px;bottom: 85px;">
            <el-button type="primary" icon="el-icon-plus" circle size="medium" @click="zoomIn"></el-button>
        </div>
        <div class="pos-a" style="right: 30px;bottom: 40px;">
            <el-button type="primary" icon="el-icon-minus" circle size="medium" @click="zoomOut"></el-button>
        </div>
    </div>
</template>
<script>
    /* global BMap*/
    import { MP } from './bmap.js'
    export default {
        props:{

        },
        data() {
            return {
                data: this.$parent.params.data,
                initMark:this.$parent.params.initMark,
                initPoint:this.$parent.params.initPoint,
                map: '',
                ac: '',
                searchKeywords: '',
                marker: '',
                point: '',
                myValue: '',
                markerInfo: {
                    address: '',
                    lng: '',
                    lat: ''
                }
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(() => {
                MP().then(() => {
                    this.createMap();

                    this.$on('global:ui_map_dialog_confirm', () => {
                        this.$emit('global:ui_map_confirm', this.markerInfo);
                        this.$parent.close();
                    });
                });
            });
        },
        watch:{

        },
        methods:{
            createMap() {
                this.map = new BMap.Map("bmap", { enableMapClick:false });
                if(this.data && this.data.lng && this.data.lat && this.initMark) {
                    this.point = new BMap.Point(this.data.lng, this.data.lat);
                    this.map.centerAndZoom(this.point, 12);
                    this.marker = new BMap.Marker(this.point);
                    this.map.addOverlay(this.marker);    //添加标注
                    this.marker.addEventListener("click", this.getMarkerInfo);
                } else {
                    let point = new BMap.Point((this.initPoint && this.initPoint.lng) ? this.initPoint.lng : 106.723715, (this.initPoint && this.initPoint.lat) ? this.initPoint.lat : 26.603064);
                    this.map.centerAndZoom(point, 12);
                }

                this.map.enableScrollWheelZoom();
                this.map.disableDoubleClickZoom();

                this.map.addEventListener("dblclick", this.markPoint);

                //建立一个自动完成的对象
                this.ac = new BMap.Autocomplete(
                    {
                        "input":"suggestId"
                        , "location":this.map
                    });

                //鼠标点击下拉列表后的事件
                this.ac.addEventListener("onconfirm", (e) => {
                    let _value = e.item.value;
                    this.myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

                    this.setPlace();
                });
            },
            setPlace() {
                this.map.clearOverlays();    //清除地图上所有覆盖物
                let local = new BMap.LocalSearch(this.map, { //智能搜索
                    onSearchComplete: () => {
                        this.point = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        this.map.centerAndZoom(this.point, 18);
                        this.marker = new BMap.Marker(this.point);
                        this.map.addOverlay(this.marker);    //添加标注
                        this.marker.addEventListener("click", this.getMarkerInfo);
                    }
                });
                local.search(this.myValue);
            },
            showSearch() {
                this.ac.show();
            },
            markPoint(e) {
                this.searchKeywords = '';
                this.map.clearOverlays();    //清除地图上所有覆盖物
                this.point = new BMap.Point(e.point.lng, e.point.lat);
                this.marker = new BMap.Marker(this.point);
                this.map.addOverlay(this.marker);    //添加标注
                this.marker.addEventListener("click", this.getMarkerInfo);
                this.getMarkerInfo(); //直接打开dialog
            },
            getMarkerInfo() {
                let gc = new BMap.Geocoder();
                gc.getLocation(this.point, (rs) => {
                    if(rs){
                        let addComp = rs.addressComponents;
                        this.markerInfo.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                        let point = rs.point;
                        this.markerInfo.lng = point.lng;
                        this.markerInfo.lat = point.lat;
                        this.$bui.drawer({
                            comp:() => import('./ui-map-dialog.vue'),
                            closeBtn: false,
                            size: 'full',
                            params:{
                                markerInfo: this.markerInfo
                            },
                        })
                    }
                });
            },
            zoomIn() {
                this.map.zoomIn();
            },
            zoomOut() {
                this.map.zoomOut();
            }
        },
        beforeDestroy() {
            this.ac.dispose()
        }
    }
</script>

